<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <style>
    .btn {
      margin: 5px 5px;
    }

    .bg-f2 {
      background-color: #f8f9fa;
    }

    video {
      width: 500px;
      height: auto;
    }

    .videoRow {
      margin-top: 30px;
    }

    #previewLabel {
      display: block;
      position: absolute;
    }

    .rangeInput {
      border: none;
      border-bottom: 1px solid #000;
      outline: none;
      width: 59px;
      padding-left: 5px;
      font-weight: 500;
    }

    .box {
      background: #007bff;
      width: 0px;
      height: 0px;
      position: absolute;
      opacity: 0.3;
      cursor: move;
    }
  </style>
  <title class="screenSharing">屏幕共享</title>
</head>

<body class="bg-f2">

  <div class="container">

    <div class="my-3 p-3 bg-white rounded box-shadow small">

      <h6 class="border-bottom border-gray pb-2 mb-0 screenSharing">屏幕共享</h6>

      <div class="row" style="margin-top:1%">

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="audioList"><strong
                  class="text-gray-dark audioDevices">音频设备</strong></label>
            </div>
            <select class="custom-select" id="audioList" style="width: 50%; max-width: 200px;">
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="videoList"><strong
                  class="text-gray-dark videoDevices">视频设备</strong></label>
            </div>
            <select class="custom-select" id="videoList" style="width: 50%; max-width: 200px;">
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="screenList"><strong
                  class="text-gray-dark shareScreen">共享屏幕</strong></label>
            </div>
            <select class="custom-select" id="screenList" style="width: 50%; max-width: 200px;">
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="screenList"><strong
                  class="text-gray-dark isScreenAudio">是否共享音频</strong></label>
            </div>
            <select class="custom-select" id="isScreenAudio" style="width: 50%; max-width: 200px;">
              <option value="yes" class="yes">是</option>
              <option value="no" class="no">否</option>
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="videoOptimizationMode"><strong
                  class="text-gray-dark videoOptimizationMode">视频优化模式</strong></label>
            </div>
            <select class="custom-select" id="videoOptimizationMode" style="width: 50%">
              <option value="default" selected>默认</option>
              <option value="motion">流畅优先</option>
              <option value="detail">清晰优先</option>
            </select>
          </div>
        </div>

        <div class="row">
          <div class="col-sm">
              <div class="input-group input-group-sm mb-3">
                  <div class="input-group-prepend">
                      <label class="input-group-text" for="videoCodec"><strong class="text-gray-dark videoCodeType">视频编码</strong></label>
                  </div>
                  <select class="custom-select" id="videoCodec" style="width: 60%">
                      <option value="">auto</option>
                      <option value="H264">H264</option>
                      <option value="VP8">VP8</option>
                  </select>
              </div>
          </div>
        </div>

      </div>
      <div class="row">
        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="roomId"><strong class="text-gray-dark roomid">房间号</strong></label>
            </div>
            <input type="email" class="form-control d-inline" id="roomId" style="width: 60%; max-width: 200px;"
              aria-describedby="emailHelp" placeholder="please enter room ID" value="">
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="screenWidth"><strong class="text-gray-dark width">宽</strong></label>
            </div>
            <input type="email" class="form-control d-inline" id="screenWidth" style="width: 60%; max-width: 200px;"
              aria-describedby="emailHelp" placeholder="please enter screen width">
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="screenHeight"><strong
                  class="text-gray-dark height">高</strong></label>
            </div>
            <input type="email" class="form-control d-inline" id="screenHeight" style="width: 60%; max-width: 200px;"
              aria-describedby="emailHelp" placeholder="please enter screen height">
          </div>
        </div>
        <!-- <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="videoQuality"><strong class="text-gray-dark videoQuality">推流质量</strong></label>
            </div>
            <select class="custom-select" id="videoQuality" style="width: 50%">
              <option value="1" selected>标清</option>
              <option value="2">高清</option>
              <option value="3">超清</option>
              <option value="4">自定义</option>
            </select>
          </div>
        </div> -->

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="screenFrameRate"><strong
                  class="text-gray-dark height">共享帧率</strong></label>
            </div>
            <select class="custom-select" id="screenFrameRate">
              <option value="5">5</option>
              <option value="10" selected>10</option>
              <option value="15">15</option>
              <option value="20">20</option>
              <option value="30">30</option>
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="screenBitRate"><strong class="text-gray-dark">共享码率</strong></label>
            </div>
            <select class="custom-select" id="screenBitRate">
              <option value="800">800</option>
              <option value="1500">1500</option>
              <option value="2000" selected>2000</option>
              <option value="2500">2500</option>
            </select>
          </div>
        </div>
      </div>


      <div class="row">
        <div class="col-sm">
          <button type="button" id="openRoom" class=" btn btn-primary btn-sm enterRoomPlay">进入房间</button>
          <button type="button" id="createStream" class=" btn btn-primary btn-sm">开启音视频预览</button>
          <button type="button" id="screenShot" class="btn btn-primary btn-sm screenSharingContent">屏幕共享</button>
          <button type="button" id="stopScreenShot" class="btn btn-primary btn-sm stopScreenSharing">停止捕捉</button>
          <button type="button" id="startRecord" disabled class=" btn btn-primary btn-sm">开始录制</button>
          <button type="button" id="stopRecord" disabled class=" btn btn-primary btn-sm">结束录制</button>
          <button type="button" id="pauseRecord" disabled class=" btn btn-primary btn-sm">暂停录制</button>
          <button type="button" id="resumeRecord" disabled class=" btn btn-primary btn-sm">恢复录制</button>
          <button type="button" id="saveRecord" disabled class=" btn btn-primary btn-sm">保存录制</button>
          <button type="button" id="leaveRoom" class="btn btn-secondary btn-sm leaveRoom">退出</button>
        </div>
      </div>

      <div class="row videoRow">
        <div class="col-sm">
          <label id="previewLabel" class="text-white"></label>
          <video id="previewVideo" autoplay muted playsinline></video>
        </div>

        <div class="col-sm remoteVideo">
          <!--<video  autoplay muted playsinline></video>-->
        </div>
      </div>
    </div>
  </div>

<script type="text/javascript" src="../record/record.bundle.js"></script></body>

</html>
